<template>
  <div class="sort-class">
    <el-dialog :visible.sync="dialog" :title="`${title ? title : defaultTitle}编辑`" :before-close="handleClose" width="590px">
      <el-form :model="InformationManage" label-width="200px" ref="updateForm">
        <el-form-item label="自定义名称">
          <el-input v-model="InformationManage.name"/>
        </el-form-item>
        <el-form-item label="数量设置">
          <el-select v-model="InformationManage.num">
            <el-option
              v-for="item in nums"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序设置">
          <el-select v-model="InformationManage.seq">
            <el-option
              v-for="item in seqs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updateData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {update} from '@/api/system/information_manage';

  export default {
    props: {
      dialog: {
        type: Boolean,
        default: false
      },
      defaultTitle: {
        type: String,
        default: ''
      },
      dialogData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        nums: [{
          label: '3',
          value: '3'
        },
          {
            label: '6',
            value: '6'
          },
          {
            label: '9',
            value: '9'
          },
          {
            label: '12',
            value: '12'
          }],
        seqs: [{
          label: '最新',
          value: '最新'
        },
          {
            label: '最近头条',
            value: '最近头条'
          },
          {
            label: '最近推荐',
            value: '最近推荐'
          },
          {
            label: '最近置顶',
            value: '最近置顶'
          }]
      }
    },
    computed: {
      InformationManage() {
        return this.dialogData
      },
      title() {
        return this.InformationManage.name
      }
    },
    methods: {
      updateData() {
        this.$refs['updateForm'].validate((valid) => {
          if (valid) {
            update(this.InformationManage).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.$emit('sortsubmit');
            })
          }
        })
      },
      handleClose() {
        this.$emit('sortclose');
      },
      handleSubmit() {
        this.$emit('sortsubmit');
      }
    }
  }
</script>

<style lang="scss">
  .sort-class {
    .el-input {
      width: 200px;
    }
  }
</style>
